<template>
  <Row>
    <i-col span="16">
      <Row v-for="i in customIconList.length / 3" :key="`custom-icon-row-${i}`">
        <i-col
          span="8"
          v-for="item in customIconList.slice((i - 1) * 3, i * 3)"
          :key="`custom-icon-${item}`"
        >
          <Card style="margin: 0 5px 5px; text-align: center">
            <icons :size="30" :type="item" />
            <p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
            <p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
          </Card>
        </i-col>
      </Row>
      <Row>
        <i-col>
          <Card style="margin: 0 5px 5px; text-align: center">
            <common-icon :size="30" type="ionic" />
            <p class="icon-code">iView内置图标</p>
            <p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
          </Card>
        </i-col>
      </Row>
    </i-col>
    <i-col span="8">
      <Card>
        <p class="intro-p">
          <Icon
            style="margin-right: 10px"
            :size="10"
            type="heart"
          />Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。
        </p>
        <p class="intro-p">
          <Icon
            style="margin-right: 10px"
            :size="10"
            type="heart"
          />CommonIcon组件同时支持iView内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"
        </p>
      </Card>
    </i-col>
  </Row>
</template>

<script>
import Icons from "_c/icons";
import CommonIcon from "_c/common-icon";
export default {
  name: "icons_pages",
  components: {
    Icons,
    CommonIcon,
  },
  data() {
    return {
      customIconList: ["woman", "man", "smile", "meh", "frown", "bear"],
    };
  },
};
</script>

<style lang="less">
.icon-code {
  margin: 20px 0 10px;
}
.intro-p {
  margin-bottom: 10px;
}
</style>